<script setup>
import {ref} from 'vue'
import {useTokenStore} from "@/stores/token";
import useUserInfoStore from "@/stores/userInfo";
import {ElMessage} from "element-plus";
import {customerAvatarUpdateService, customerInfoUpdateService} from "@/apis/customer";
import {Plus, Upload} from "@element-plus/icons-vue";
const uploadRef = ref()
const formRef = ref(null)
//token

const tokenStore = useTokenStore()
//用户头像地址
const userInfoStore = useUserInfoStore();
const imgUrl= ref(userInfoStore.info.userPic)
const userInfo = ref({...userInfoStore.info})
const uploadSuccess = (result) => {
    imgUrl.value = result.data;
}
console.log(userInfoStore.info)
// 头像修改-------------------------------------------------------------
const updateAvatar = async () => {
    console.log(imgUrl.value)
    let result = await customerAvatarUpdateService(imgUrl.value);
    ElMessage.success(result.message ? result.message : '修改成功');
    //修改pinia中的数据
    userInfoStore.info.userPic = imgUrl.value;
}

const validatePhone = (rule, value, callback) => {
    if (!value) {
        callback()
    } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
        const isPhone = reg.test(value)
        value = Number(value) //转换为数字
        if (typeof value === 'number' && !isNaN(value)) {
            //判断是否为数字
            value = value.toString() //转换成字符串
            if (value.length < 0 || value.length > 12 || !isPhone) {
                //判断是否为11位手机号
                callback(new Error('请输入11位手机号'))
            } else {
                callback()
            }
        } else {
            callback(new Error('请输入电话号码'))
        }
    }
}

// 表单校验
const rules = {
    nickname: [
        { required: true, message: '请输入用户昵称', trigger: 'blur' },
        {
            pattern: /^\S{2,10}$/,
            message: '昵称必须是2-10位的非空字符串',
            trigger: 'blur'
        }
    ],
    email: [
        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
    ],
    phone: [
        {validator: validatePhone, trigger: 'blur'}
    ]
}

// 更新个人信息-------------------------------------------------------------
const updateInfo = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let result = await customerInfoUpdateService(userInfo.value);
            ElMessage.success(result.message ? result.message : '修改成功');
            // 修改pinia中的个人信息
            userInfoStore.setInfo(userInfo.value)
        }
    })
}

</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div><el-button @click="$router.push('/')" style="font-size: 12px;"><el-icon style="margin-right: 10px"><ArrowLeft /></el-icon>回到首页</el-button></div>
            <div class="header">
                <span>个人信息</span>
            </div>
        </template>
        <el-row>
            <el-col :span=6>
                <el-upload
                    ref="uploadRef"
                    class="avatar-uploader"
                    :show-file-list="false"
                    :auto-upload="true"
                    action="/api/upload"
                    name="file"
                    :headers="{'Authorization': tokenStore.token}"
                    :on-success="uploadSuccess"
                >
                    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                    <img v-else src="@/assets/images/avatar.jpg" width="278" />
                </el-upload>
                <br />
                <el-button type="primary" :icon="Plus" size="large"  @click="uploadRef.$el.querySelector('input').click()">
                    选择图片
                </el-button>
                <el-button type="success" :icon="Upload" size="large" @click="updateAvatar">
                    上传头像
                </el-button>
            </el-col>
            <el-col :span="8">
                <el-form ref="formRef" :model="userInfo" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="用户名">
                        <el-input v-model="userInfo.username" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="用户昵称" prop="nickname">
                        <el-input v-model="userInfo.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="用户邮箱" prop="email">
                        <el-input v-model="userInfo.email"></el-input>
                    </el-form-item>
                    <el-form-item label="用户手机号" prop="phone">
                        <el-input v-model="userInfo.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="用户地址" prop="address">
                        <el-input v-model="userInfo.address"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updateInfo">提交修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>

<style lang="scss" scoped>
.header {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}
.avatar-uploader {
    :deep() {
        .avatar {
            width: 278px;
            height: 278px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 278px;
            height: 278px;
            text-align: center;
        }
    }
}
</style>